<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useTheme } from 'vuetify'
import { openExternal, openFile } from '@/renderer/utils'
import { useCounterStore } from '@/renderer/store/counter'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const { locale, availableLocales } = useI18n()
const { counterIncrease, setName, setloginDialogVisible } = useCounterStore()
const { counter, name } = storeToRefs(useCounterStore())
const theme = useTheme()
const languages = ref(['en'])
const appVersion = ref('Unknown')
const selectedFile = ref('')
const slides = ['First', 'Second']
const colors = ['indigo', 'warning', 'pink darken-2', 'red lighten-1', 'deep-purple accent-4']
const router = useRouter()
const desserts = [
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  },
  {
    index: 0,
    name: '1',
    inTime: '1',
    result: 'true',
    number: '1',
    useTime: '1',
    savePath: '1',
  }
]

onMounted((): void => {
  languages.value = availableLocales

  // Get application version from package.json version string (Using IPC communication)
  getApplicationVersionFromMainProcess()
})

const getApplicationVersionFromMainProcess = (): void => {
  window.mainApi.invoke('msgRequestGetVersion').then((result: string) => {
    appVersion.value = result
  })
}
</script>

<template>
  <v-container>
    <v-row no-gutters class="text-center fill-height">
      <v-img class="mx-auto" height="300" lazy-src="https://picsum.photos/id/11/100/60" max-width="500"
        src="https://bad.src/not/valid">
        <template v-slot:placeholder>
          <div class="d-flex align-center justify-center fill-height">
            <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
          </div>
        </template>
      </v-img>
    </v-row>
    <v-row>
      <v-col v-for="n in 6" :key="n" class="d-flex child-flex" cols="2">
        <v-img height="80" :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
          :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`" aspect-ratio="1" class="bg-grey-lighten-2">
          <template v-slot:placeholder>
            <v-row align="center" class="fill-height ma-0" justify="center">
              <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
            </v-row>
          </template>
        </v-img>
      </v-col>

      <!-- <v-sheet class="mx-auto" max-width="800">
        <v-slide-group show-arrows>
          <v-slide-group-item v-for="n in 6" :key="n" v-slot="{ isSelected, toggle }">
            <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2" rounded @click="toggle">
              Options {{ n }}
            </v-btn>
            <v-img @click="toggle" :color="isSelected ? 'primary' : undefined" height="80"
              :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
              :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`" aspect-ratio="1"
              class="bg-grey-lighten-2 ma-2">
              <template v-slot:placeholder>
                <v-row align="center" class="fill-height ma-0" justify="center">
                  <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
                </v-row>
              </template>
            </v-img>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet> -->
    </v-row>
    <v-row class="mt-4">
      <v-col cols="12">
        <v-table height="400" fixed-header>
          <thead>
            <tr>
              <th class="text-left">
                 序号
              </th>
              <th class="text-left">
                图片名称
              </th>
              <th class="text-left">
                录入时间
              </th>
              <th class="text-left">
                 识别结果
              </th>
              <th class="text-left">
                目标数目
              </th>
              <th class="text-left">
                用时
              </th>
              <th class="text-left">
                保存路径
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in desserts" :key="item.name">
              <td>{{ item.index }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.inTime }}</td>
              <td>{{ item.result }}</td>
              <td>{{ item.number }}</td>
              <td>{{ item.useTime }}</td>
              <td>{{ item.savePath }}</td>
            </tr>
          </tbody>
        </v-table>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped></style>
